<template>
  <van-calendar v-model:show="showcalendar" :min-date="new Date(0)" @confirm="onDateConfirm" />
  <div class="page">
    <van-nav-bar title="以爱之名-姨妈日历" left-text="返回" left-arrow @click-left="$router.back" />
    <div style="padding: 20px">
      <van-button type="primary" block color="red" :disabled="inedit" @click="showcalendar = true">
        姨妈来了
      </van-button>
    </div>
    <van-pull-refresh v-model="loading" @refresh="onRefresh" class="list">
      <van-cell v-for="(item, i) in list" :key="item.time">
        <template #title>
          <span class="custom-title">{{ item.text }}</span>
          <van-tag type="primary" style="margin-left: 10px" v-if="item.diff">
            {{ item.diff }}天
          </van-tag>
        </template>

        <van-button type="danger" size="small" @click="deleteItem(i)" :disabled="inedit">
          删除
        </van-button>
      </van-cell>
    </van-pull-refresh>
    <div class="chart" ref="chartContainer"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showConfirmDialog } from 'vant'
import echarts from '@/utils/echarts'
import { tryOnMounted } from '@vueuse/core'

import { http_gitee } from '@/utils/http_gitee'
import { onMounted } from 'vue'

const access_token = '6d0b4e771ac1cac0d2298e78825dfb17'
let inedit = ref(false)

let list = ref([])
const setList = (_list) => {
  _list.forEach((item, i) => {
    if (!_list[i + 1]) {
      item.diff = null
    } else {
      item.diff = Math.round((item.time - _list[i + 1].time) / 86400000)
    }
  })
  tryOnMounted(() => {
    setOption(_list)
  })
  list.value = _list
}

let chartContainer = ref()
let chart
onMounted(() => {
  chart = echarts.init(chartContainer.value)
})
const setOption = (list) => {
  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      inverse: true
    },
    yAxis: {
      type: 'value'
    },
    series: {
      type: 'line',
      smooth: true,
      name: '天数'
    },
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 6
      }
    ],
    dataset: {
      dimensions: ['text', 'diff'],
      source: list
    }
  })
}

function getdata() {
  return http_gitee.get('4qf2cvyjlo0psg1drw8zt42', { params: { access_token } }).then((res) => {
    let content = res.files.yima.content
    let list = JSON.parse(content)
    setList(list)
    return list
  })
}
function setData(newList) {
  inedit.value = true
  return http_gitee
    .patch('4qf2cvyjlo0psg1drw8zt42', {
      access_token,
      files: {
        yima: {
          content: JSON.stringify(newList)
        }
      }
    })
    .then((res) => {
      let content = res.files.yima.content
      let list = JSON.parse(content)
      setList(list)
      inedit.value = false
      return list
    })
}

getdata()
const loading = ref(false)
const onRefresh = () => {
  getdata().then(() => {
    loading.value = false
  })
}

let showcalendar = ref(false)
function onDateConfirm(value) {
  showcalendar.value = false
  let date = new Date(+value + 1e3 * 60 * 60 * 8).toISOString().substring(0, 10)
  getdata().then((list) => {
    let isIn = list.find((item) => item.text === date)
    if (isIn) {
      return
    }

    let obj = {
      time: +value,
      text: date
    }
    let newList = [obj, ...list].sort((a, b) => b.time - a.time)
    setData(newList)
  })
}

function deleteItem(i) {
  let text = list.value[i].text
  showConfirmDialog({
    message: '确定删除' + text + '吗',
    closeOnClickOverlay: true
  }).then(() => {
    getdata().then((list) => {
      let newList = [...list].filter((item) => item.text !== text)
      setData(newList)
    })
  })
}
</script>
<style scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.list {
  overflow: auto;
  flex: 1;
}
.chart {
  height: 60vmin;
}
</style>
